import React from 'react';
import styles from './index.less';

export default function IndexPage() {
  return (
    <div className="container mx-auto p-4">
      <h1 className={styles.title}>Page index</h1>

      <h1 className="title mt-4">Flexable</h1>
      <div className="flexable mt-4">
        <div className="flex-item">1</div>
        <div className="flex-item">2</div>
        <div className="flex-item">3</div>
      </div>

      <div className="mt-4 p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
        <div className="flex-shrink-0">
          <img
            className="h-12 w-12"
            src={
              ''
            }
            alt="ChitChat Logo"
          />
        </div>
        <div>
          <div className="text-xl font-medium text-black">ChitChat</div>
          <p className="text-gray-500">You have a new message!</p>
        </div>
      </div>
      <div className="mt-4">
        <button className="rounded p-2 text-white transition duration-500 ease-in-out bg-blue-600 hover:bg-red-600 transform hover:-translate-y-1 hover:scale-110 ...">
          Hover me
        </button>
      </div>
    </div>
  );
}
